<template>
  <h2>选项式API(配置):props</h2>
  <div class="note">
    <h3>选项式API</h3>
    <p>1. 定义属性在export default 的props中</p>
  </div>

  <hr class="hr-style" />
  <div class="test">
    <h3 @click="editTitle">props.title - 赋值修改值: {{ t }}</h3>
    <p>props.des: {{ des }}</p>
    <p>props.user.name: {{ user.name }}</p>
    <p>props.user.sex: {{ user.sex }}</p>
  </div>

  <div class="test">
    <div v-show="isShow" class="isShowHide">显示或隐藏</div>
    <div v-show="isShow2" class="isShowHide2">显示或隐藏2</div>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  props: {
    // 在模板字符串中直接使用这些属性，在script中需要（props.）调用
    title: {
      type: String,
      required: true
    },
    des: {
      // default 与 required 写在一起时 required 失效
      type: [String, Number],
      default: 'des默认值'
    },
    dao: {
      type: Object,
      default() {
        return {
          name: '青龙影月刀'
        }
      }
    },
    user: {
      type: Object,
      // default 的形参 rawProps 可以获取 props 这一整个对象，即属性内可以调用其它属性使用
      default(rawProps) {
        console.log(rawProps, 'rawProps')
        return {
          name: '志超' + rawProps.dao.name,
          sex: 1
        }
      }
    },
    des2: {
      type: [String, Number],
      default: 'des2默认值'
    },
    // 函数类型的默认值
    propH: {
      type: Function,
      // 不像对象或数组的默认，这不是一个工厂函数。这会是一个用来作为默认值的函数
      // 可以传值，也可以传函数(在调用的时候使用)
      default() {
        console.log('子组件props函数被调用')
        return 'Default function'
      }
    }
  },
  data(){
    // 在data函数中return回去的对象里边的属性都是响应式变量
    return {
      t: ref(this.title),
      sonTitle:'我是子组件定义的标题 sonTitle',
      isShow: false
    }
  },
  methods:{
    editTitle() {
      // 不能直接修改 props的值
      // this.title = '修改后的值' // Unexpected mutation of "title" prop.
      // 可以修改被props的值初始化后的状态变量
      this.t = '可以修改被props的值初始化后的状态变量'

      // 调用子组件传过来的函数
      this.propH(this.sonTitle, this.showHandler)
    },
    showHandler() {
      this.isShow = !this.isShow
    }
  },
  computed: {},
  mounted() {},
  watch: () => {}
}
</script>

<style scoped>
.isShowHide {
  height: 100px;
  width: 100px;
  background-color: cyan;
}
.isShowHide2 {
  height: 100px;
  width: 100px;
  background-color: rgb(94, 104, 223);
}
body {
  padding: 20px;
}
h2 {
  color: red;
}
h3 {
  color: rgb(220, 85, 85);
}
h4 {
  color: skyblue;
}
.hr-style {
  border: 3px solid gold;
  margin: 20px 0;
}
.note {
  margin: 10px;
  padding: 10px;
  border: 3px solid rgb(221, 121, 202);
}
.note p {
  color: rgb(226, 106, 204);
  font-weight: bold;
}
</style>
